<script setup>
import { ref } from 'vue';
import sysmenu from './SysMenu.vue';
import tabs from './Tabs.vue';

const cacheNamesList = ref([]); //需要缓存的组件的name集合，与组件的<script set name="xxx">中的name对应
const isCollapsed = ref(false);

const pvisible = ref(false);
	    	
const showModal = () => {
  pvisible.value = true;
};

const _logout = () => {
  
};

const handleOk = () => {
  pvisible.value = false;
};

/*return {
  pvisible,
  showModal,
  handleOk,
};*/

const switchCollapsed = () => {
  isCollapsed.value = !isCollapsed.value;
};
const addTab = ref();
function addTabByMenu(tabInfo) {
    addTab.value.add(tabInfo);
}
function removeCachePageId(removedId) { //页签关闭前调用，删除需要缓存的组件名称
  cacheNamesList.value = cacheNamesList.value.filter(pageId => pageId !== removedId);
}
function addCachePageId(addedId) { //添加页签前时调用，缓存对应组件名称
  cacheNamesList.value.push(addedId);
}
</script>
<template>
  <a-layout>
    <a-layout-header>
		<a-row type="flex">
		    <a-col flex="200px">
				<img class="hlogo" src="/logo.png" />
			</a-col>
		    <a-col :flex="4">----------预留位----------</a-col>
		    <a-col :flex="1" style="text-align: right; padding-right: 20px;">
				<a-avatar src="https://joeschmoe.io/api/v1/random" />
				<a-dropdown>
				  <a class="ant-dropdown-link" @click.prevent>
				    欢迎,管理员
				    <DownOutlined />
				  </a>
				  <template #overlay>
				    <a-menu>
				      <a-menu-item key="0">
				        <a-button type="link" block @click="showModal">修改密码</a-button>
				      </a-menu-item>
				      <a-menu-item key="1">
				        <a-button type="link" block @click="_logout">注销</a-button>
				      </a-menu-item>
				      <a-menu-divider />
				      <a-menu-item key="3" disabled>3rd menu item（disabled）</a-menu-item>
				    </a-menu>
				  </template>
				</a-dropdown>
			</a-col>
		  </a-row>		
	</a-layout-header>
    <a-layout>
      <a-layout-sider v-model:collapsed="isCollapsed">
        <sysmenu @addTabByMenu="addTabByMenu"></sysmenu>
      </a-layout-sider>
      <a-layout-content>
        <tabs ref="addTab" @removeCachePageId="removeCachePageId" @addCachePageId="addCachePageId"></tabs><!--自定义触发时间，以备子组件调用-->
        <div class="mainDiv">
          <router-view v-slot="{ Component }">
            <keep-alive :include="cacheNamesList">
              <component :is="Component"/>
            </keep-alive>
          </router-view>
		  <a-modal v-model:visible="pvisible" title="Basic Modal" @ok="handleOk">
		      <p>Some contents...</p>
		      <p>Some contents...</p>
		      <p>Some contents...</p>
		  </a-modal>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lant="ts">
import { defineComponent } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';
export default defineComponent({
	components: {
		DownOutlined,
	},
});
</script>
<style scoped>
section.ant-layout {
    height: 100%;
    background-color: white;
}
.mainDiv {
  height: calc(100% - 42px);/*计算值，42px为顶部header的高度*/
  overflow: auto;
  padding: 0 2px;
}

.hlogo {
	height: 64px;
	width: 200px;
}
</style>